<template>
	<view class="container">
		<view class="top">
			<view class="search"><view class="small"><image src="/static/search.png" /></view><view class="input"><input type="text" placeholder="搜索活动名称" @input="InputNickName" confirm-type="search" @confirm="Search"/></view></view>
			<view class="order" @click="Sort()">离我最近</view>
			<view class="sort" :style="Order=='asc'?'':'transform: rotate(180deg);'"><image src="/static/sanjiao.png" /></view>
		</view>
		<view class="list" v-for="(Info,Index) in List" @click="ActiveInfo(Info, Index)">
			<view class="img">
				<image :src="Tools.GetImg(Info.Img,500)" mode="aspectFill" />
				<view class="state" :class="'state'+Info.State">{{Info.StateText}}</view>
				<view class="distance">{{Info.Distance}}</view>
				<view class="endtime" v-if="Info.IsStop==0"><view class="meng"></view><view class="time"><liu-countdown mode="2" auto :showSeconds="true" :endDate="Info.StopTime" /></view></view>
			</view>
			<view class="name">{{Info.Name}}</view>
			<view class="line"><view class="icon"><image src="/static/address.png" /></view><view class="value">{{Info.Address}}</view></view>
			<view class="line"><view class="icon"><image src="/static/time.png" /></view><view class="value">活动举办时间：{{Info.ActiveDate.ToDate()}}（{{Info.ActiveDate.ToWeek()}}）{{Info.BeginTime}}-{{Info.EndTime}}</view></view>
			<view class="line border-b"><view class="icon"><image src="/static/shalou.png" /></view><view class="value">报名截止时间：{{Info.StopTime.ToDate()}}（{{Info.StopTime.ToWeek()}}）{{Info.StopTime.ToMinute()}}</view></view>
			<view class="bottom"><view class="author">{{Info.Author}}</view><view class="author" v-if="Info.ShowEnrollment==1">已报名<text class="red">{{Info.UserReplyCount}}</text>人</view></view>
		</view>
		<view class="nodata" v-if="NoData"></view>
		<view class="loadmore">{{Tip}}</view>
		
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: "活动",
		      path: "pages/active/activelist?ParentID="+UserID//这是一个路径
		    }
		},
		data() {
			return {
				Lat:0,
				Lng:0,
				Index:-1,
				Order:"",
				Tip:'正在加载...',
				Page:1,
				List:[],
				NoData:false,
				LoadMore:true,
				Keyword:'',
			};
		},
		onPullDownRefresh() {
			this.Re_Load();
		},
		onReachBottom() {
			if(this.LoadMore){
				this.Page++;
				this.Find_Pager();
			}
		},
		onShow() {			

		},
		onLoad(options) {
			this.Util.SetParam(options); 
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			      this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			      this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
				  this.Find_Pager();
			  },
			  fail: res=>{
				  this.Find_Pager();
			  }
			});		
		},			
		methods:{
			Sort(){
				this.Order=this.Order=="asc"?"desc":"asc";
				this.Re_Load();
			},
			InputNickName(e){
				this.Keyword = e.detail.value;
			},
			Search(){
				this.Re_Load(); 
			},
			ActiveInfo(Info, Index){
				if(Info.IsExpire==1){
					this.Util.Alert("该活动已结束并过期");
					return;
				}
				this.Index=Index;
				uni.navigateTo({
					url:"/pages/active/activeinfo?ID="+Info.ID
				})
			},
			Find_Pager(){
				var data = {};
				data.Act="Find_Active";
				data.Page=this.Page;
				data.Keyword=this.Keyword;
				data.Limit=20;
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				data.Order=this.Order;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					this.List= this.List.concat(json.Data.List);
					if(json.Data.Count==0){
						this.NoData=true;
						this.Tip="没有找到任何相亲角";
					}
					else if(this.List.length>=json.Data.Count){
						this.LoadMore=false;
						this.Tip="我是有底线的";
					}
				});
			},
			Re_Load(){
				this.List=[];
				this.Page=1; 
				this.NoData=false;
				this.LoadMore=true;
				this.Tip='正在加载...';
				this.Find_Pager();
			}
		}
	}
</script>

<style lang="scss">
	.container{width:100%; padding:20rpx;
		.top{width:100%; height:85rpx; display: flex; flex-direction: row;
			.search{flex:1; height:70rpx; padding-top:14rpx; padding-left:20rpx; float:left; border-radius: 35rpx; background-color:#ffffff; display: flex; flex-direction: row;
				.small{width:40rpx; height:40rpx; margin-top:6rpx; image{width:100%; height:100%;}}
				.input{flex:1; height:50rpx; line-height: 50rpx; padding-left:10rpx;}
			}
			.order{width:auto; height:70rpx; line-height: 70rpx; margin-left:15rpx; margin-right: 10rpx; border-radius: 10rpx; text-align: left;}
			.sort{width:24rpx; height:70rpx; line-height:70rpx; image{width:100%; height:24rpx;}} 
		}
		.list{width:100%; height:auto; padding:15rpx; border-radius: 20rpx; margin-bottom: 20rpx; background-color: #ffffff; display: flex; flex-direction: column;
			.img{width:100%; height: 400rpx; float:left; position: relative; font-size:28rpx; image{width:100%; height:100%; border-radius: 20rpx;}
				.state{width:auto; height: 46rpx; line-height: 46rpx; padding-left:45rpx; padding-right: 12rpx; border-radius: 25rpx; background-color: #17b202; color:#ffffff; background-image: url(/static/time2.png); background-size: 30rpx; background-repeat: no-repeat; background-position: 10rpx center; position:absolute; top:20rpx; left:20rpx;}
				.state0{background-color: #17b202;}
				.state1{background-color: #0e90fe;}
				.state2{background-color: #000000;}
				.distance{width:auto; height: 46rpx; line-height: 46rpx; padding-left:45rpx; padding-right: 12rpx; border-radius: 25rpx; background-color: #0e90fe; color:#ffffff; background-image: url(/static/distance.png); background-size: 30rpx; background-repeat: no-repeat; background-position: 10rpx center; position:absolute; top:20rpx; right:20rpx;}
				.endtime{width:auto; height:40rpx; line-height: 40rpx;
					.meng{position: absolute; width:320rpx; height:50rpx; line-height: 50rpx; border-radius: 25rpx; right:20rpx; bottom:20rpx; background-color: #000000; opacity: 0.7;}
					.time{position: absolute; width:320rpx; height:50rpx; line-height: 50rpx; text-align: center; right:20rpx; bottom:20rpx; color:#ffffff; font-size:32rpx;}
				}
			}
			.name{width:100%; min-height: 44rpx; line-height: 44rpx; margin-top:10rpx; margin-bottom: 10rpx; float:left; font-size:36rpx; font-weight: bold;}
			.line{width:100%; min-height: 60rpx; float:left; display: flex; flex-direction: row;
				.icon{width:30rpx; height:30rpx; margin-top:5rpx; image{width:30rpx; height:30rpx;}}
				.value{width:auto; min-height:40rpx; line-height: 40rpx; padding-left:8rpx; font-size:30rpx;}
			}
			.bottom{width:100%; height: 70rpx; line-height: 80rpx; font-size:28rpx; float:left; display: flex; flex-direction: row; justify-content: space-between;}
		}
		.list:active{background-color:#f6f6f6 ;}
	}
</style>
